<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../img/asset-favico.ico">
        <title>阿拉尔幼儿接种系统</title>
        <link rel="stylesheet" href="../css/page-health-index.css" />
        <link rel="stylesheet" href="../css/page-health-login.css" />
        <link rel="stylesheet" href="../plugins/elementui/index.css" />
        <script src="../plugins/jquery/dist/jquery.min.js"></script>
        <script src="../plugins/healthmobile.js"></script>
        <script src="../plugins/vue/vue.js"></script>
        <script src="../plugins/vue/axios-0.18.0.js"></script>
        <script src="../plugins/elementui/index.js"></script>
		<link rel="stylesheet" href="../css/page-health-information.css" />
		
		<script>
		    $(function() {
		        var ht = $('.banner-item').find('img').eq(0).height()
		        var tg = $('.banner-item .item');
		        var num = 0;
		        for (i = 0; i < tg.length; i++) {
		            $('.indicators').append('<span></span>');
		            $('.indicators').find('span').eq(num).addClass('active');
		        }
		        $(".banner-item,.banner-roll").css('height', ht)
		
		        function roll() {
		            tg.eq(num).animate({
		                'opacity': '1',
		                'z-index': num
		            }, 2000).siblings().animate({
		                'opacity': '0',
		                'z-index': 0
		            }, 2000);
		            $('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active');
		            if (num >= tg.length - 1) {
		                num = 0;
		            } else {
		                num++;
		            }
		        }
		        $('.indicators').find('span').click(function() {
		            num = $(this).index();
		            roll();
		        });
		        var timer = setInterval(roll, 3000);
		        $('.banner-item').mouseover(function() {
		            clearInterval(timer)
		        });
		        $('.banner-item').mouseout(function() {
		            timer = setInterval(roll, 3000)
		        });
				
		    })
		    $(window).resize(function() {
		        var ht = $('.banner-item').find('img').eq(0).height()
		        $(".banner-item,.banner-roll").css('height', ht)
		    });
			
		</script>
		
    </head>
    <body data-spy="scroll" data-target="#myNavbar" data-offset="150">
        <div class="app" id="app">
            <!-- 页面头部 -->
            <div class="top-header">
                <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
                <span class="center">阿拉尔幼儿接种系统</span>
                <span class="f-right"><i class="icon-more"></i></span>
            </div>
            <div class="carousel">
                <div class="banner-roll">
                    <div class="banner-item">
                        <div class="item" style="background-image: url(../img/widget-banner_01.png);"><img src="../img/widget-banner_01.png" alt=""></div>
                        <div class="item" style="background-image: url(../img/widget-banner_02.png);"><img src="../img/widget-banner_02.png" alt=""></div>
                        <div class="item" style="background-image: url(../img/widget-banner_03.png);"><img src="../img/widget-banner_03.png" alt=""></div>
                    </div>
                    <div class="indicators"></div>
                </div>
            </div>
            <!-- 页面内容 -->
            <div class="contentBox">
                <div class="list-column2">
                    <ul class="list">
                        <li class="type-item">
                            <a href="/pages/setmeal.html" class="link-page">
                                <div class="type-title">
                                    <h3>体检预约</h3>
                                    <p>实时预约</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-zhen">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="/pages/member-orderlist.html" class="link-page">
                                <div class="type-title">
                                    <h3>订单查询</h3>
                                    <p>一键查询</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-search"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="/pages/health-risk.html" class="link-page">
                                <div class="type-title">
                                    <h3>健康评估</h3>
                                    <p>了解自身健康</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-star"><span class="path1"></span><span class="path2"></span></i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="/pages/health-record.html" class="link-page">
                                <div class="type-title">
                                    <h3>健康档案</h3>
                                    <p>掌上查询</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-record"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
                                </div>
                            </a>
                        </li>
                       <!-- <li class="type-item">
                            <a href="/pages/health-information.html" class="link-page">
                                <div class="type-title">
                                    <h3>健康咨询</h3>
                                    <p>咨询一览</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-person"><span class="path1"></span><span class="path2"></span></i>
                                </div>
                            </a>
                        </li> -->
						<!-- <li class="type-item">
						    <a href="/pages/health-intervention.html" class="link-page">
						        <div class="type-title">
						            <h3>健康干预</h3>
						            <p>采集状况</p>
						        </div>
						        <div class="type-icon">
						            <i class="icon-plus"><span class="path1"></span><span class="path2"></span></i>
						        </div>
						    </a>
						</li> -->
                    </ul>
                </div>
				<div class="news-list">
					<ul class="news">
						<li class="news-item" v-for="note in noteList">
							<a :href="'health-informationDetail.html?id='+note.id" class="link-page">
								<img class="img-object f-left" :src="note.src" :id=note.id>
								<div class="item-body">
									<h4 class="ellipsis item-title">{{note.cn_note_title}}</h4>
									<p class="ellipsis-more item-desc">作者：阿拉尔XXXXX医院</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
        </div>
    </body>
	
	<script>
		var vue = new Vue({
			el:'#app',
			data:{
				noteList:[],
			},
			created() {
			    //发送ajax请求，获取所有的文章，赋值给noteList模型数据，用于页面展示
			    axios.get("/note/findByBookName.do").then((res) => {
			      if(res.data.flag){
			    	  //查询成功，给模型数据赋值
					  console.log(JSON.stringify(res.data.data));
			    	  this.noteList = res.data.data;
			      }else{
			    	  //查询失败，弹出提示信息
			    	  this.$message.error(res.data.message);
			      }
			    });
			},
			
			methods:{
				
				//权限不足提示
				showMessage(r){
				  if(r == 'Error: Request failed with status code 403'){
				    //权限不足
				    this.$message.error('无访问权限');
				    return;
				  }else{
				    this.$message.error('未知错误');
				    return;
				  }
				}	
				
			}
		})
	</script>
	
</html>